<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器  语法：任意选择器：hover【悬停】每个伪类选择器，具备特点 
			              所有元素都具备：hover【常见伪类选择器】*/
			h1:hover{
				background: #ffaaff;
				color: #55ffff;
			}	
			/* 伪类选择器    ：link   链接未点击时状态
			               ：active  链接被点击时状态
						   ：visited 链接点击后状态
						   ：hover  悬停链接时状态
			    主要结合在一起，针对a元素效果			   
				*/		 
			   a:link{ /*未访问状态*/
				   color: #ffff00;
				   /* 去掉超链接下划线 */
				   text-decoration: none;
			   }
			   a:active{/*被点击时状态*/
				   color: #55ffff;
				   background: #aaaaff;
			   }
			   a:visited{ /*点击后状态*/
				   color: #55ffff;
				   background: #ffaaff;
			   }
			   a:hover{
				   font-size: 36px;
			   }
			   /* 
				伪类选择器：input：focus 获取焦点 鼠标点击输入框时的效果
				
				针对 输入框 input元素
				*/
			   input:focus{
				   background: #ffff00;
			   }
			   /* 伪类选择器：   :first-child  第一个儿子元素
				                :last-child   最后一个儿子元素
								:nth-child(n)  匹配n个儿子元素
				针对：父子级，默认父子级table、列表
				*/
			   li:first-child{
				   color: #55ff00;
				   background: #ffff00;
			   }
			   li:last-child{
				   font-size: 15pt;
			   }
			   li:nth-child(2){
				   background: #aaffff;
				   font-size: 15px;
			   }
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		超链接
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子级关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>